<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表 - 校园二手市场</title>
    <meta name="description" content="校园二手交易平台商品列表">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="css/products.css">
</head>
<body>
<!-- 导航栏 -->
<header class="header">
    <div class="container">
        <a href="index.html" class="logo">
            <img src="images/logo.png" alt="校园二手市场">
            <span>校园二手市场</span>
        </a>

        <nav class="nav">
            <a href="index.html"><i class="fas fa-home"></i> 首页</a>
            <a href="products.html" class="active"><i class="fas fa-list"></i> 商品</a>
            <a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
            <a href="publish.html"><i class="fas fa-plus-circle"></i> 发布</a>
            <a href="login.html" id="auth-link">
                <img id="user-avatar" src="" alt="用户头像" class="user-avatar">
                <span id="auth-text">登录/注册</span>
            </a>
        </nav>

        <button class="mobile-menu-btn" id="mobile-menu-btn">
            <i class="fas fa-bars"></i>
        </button>
    </div>
</header>

<!-- 移动菜单 -->
<div class="mobile-menu" id="mobile-menu">
    <a href="index.html"><i class="fas fa-home"></i> 首页</a>
    <a href="products.html" class="active"><i class="fas fa-list"></i> 商品</a>
    <a href="cart.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
    <a href="publish.html"><i class="fas fa-plus-circle"></i> 发布</a>
    <a href="login.html"><i class="fas fa-user"></i> 登录/注册</a>
</div>

<!-- 商品筛选 -->
<section class="product-filters">
    <div class="container">
        <div class="filter-group">
            <div class="filter-toggle" id="filter-toggle">
                <i class="fas fa-filter"></i> 筛选
            </div>
            <div class="filter-options" id="filter-options">
                <select id="category-filter">
                    <option value="">所有分类</option>
                    <option value="教材">教材书籍</option>
                    <option value="电子">电子产品</option>
                    <option value="生活">生活用品</option>
                    <option value="服饰">服装服饰</option>
                </select>

                <select id="sort-by">
                    <option value="newest">最新发布</option>
                    <option value="price-low">价格从低到高</option>
                    <option value="price-high">价格从高到低</option>
                    <option value="popular">最受欢迎</option>
                </select>

                <div class="price-range">
                    <input type="number" id="min-price" placeholder="最低价">
                    <span>-</span>
                    <input type="number" id="max-price" placeholder="最高价">
                </div>
            </div>
        </div>

        <div class="search-results-info">
            <span id="result-count">共 24 件商品</span>
            <div class="view-toggle">
                <button class="view-btn active" data-view="grid"><i class="fas fa-th"></i></button>
                <button class="view-btn" data-view="list"><i class="fas fa-list"></i></button>
            </div>
        </div>
    </div>
</section>

<!-- 商品列表 -->
<section class="product-listing">
    <div class="container">
        <div class="products-grid" id="products-view">
            <!-- 商品卡片将通过JavaScript动态加载 -->
        </div>

        <div class="pagination">
            <button class="page-btn" id="prev-page"><i class="fas fa-chevron-left"></i> 上一页</button>
            <div class="page-numbers" id="page-numbers">
                <!-- 页码将通过JavaScript动态生成 -->
            </div>
            <button class="page-btn" id="next-page">下一页 <i class="fas fa-chevron-right"></i></button>
        </div>
    </div>
</section>

<!-- 页脚 -->
<footer class="footer">
    <div class="container">
        <div class="footer-links">
            <a href="about.html">关于我们</a>
            <a href="contact.html">联系我们</a>
            <a href="privacy.html">隐私政策</a>
        </div>
        <p>&copy; 2023 校园二手市场</p>
    </div>
</footer>

<!-- 脚本 -->
<script src="js/api.js"></script>
<script src="js/common.js"></script>
<script src="js/products.js"></script>
</body>
</html>